App.require(["canvasTool"], function (canvasTool) {
    var app = App.getCurrent();

    app.defineLayer("str-rect-layer", {
        render: function (next) {
            this.initProperty();
            this.data.isChange = true;
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        },
        initProperty: function () {
            var property = this.property;

            property.id = property.id || this.uid;

            this.data.isMouseIn = false;
            if (property.animation) this.addPropertyAnimation(property.animation, this);
            this.data.attributeStr = this._createPropertyStr(property);
        },
        dispose: function () {
            this.removeAnimation();
            this.data.isChange = true;
            this.data.isMouseIn = false;
        },
        moveLayerHandler: function (ev, ctx, ratio) {
            if (this.containsBounds(ctx, ev.clientX, ev.clientY, ratio)) {
                if (!this.data.isMouseIn) {
                    this.data.isMouseIn = true;
                    this.dispatchCustomEvent("rectlayermouseenter", {
                        component: this,
                        event: ev
                    });
                }
            }
            else {
                if (this.data.isMouseIn) {
                    this.data.isMouseIn = false;
                    this.dispatchCustomEvent("rectlayermouseleave", {
                        component: this,
                        event: ev
                    });
                }
            }
        },
        clickLayerHandler: function (ev, ctx, ratio) {
            if (this.containsBounds(ctx, ev.clientX, ev.clientY, ratio)) {
                this.dispatchCustomEvent("rectclick", {
                    component: this,
                    event: ev
                });
            }
        },
        createPath: function (ctx, ratio) {
            ctx.translate(this.x * ratio, this.y * ratio);
            var img = this.getImgBySrc(this.src);
            var w = this.width || img.width, h = this.height || img.height;
            var pObj = this.createPosition(this.position, w, h);
            ctx.beginPath();
            ctx.rect(pObj.x * ratio, pObj.y * ratio, w * ratio, h * ratio);
        },
        createPosition: function (str, w, h) {
            switch (str) {
                case "lefttop": return { x: 0, y: 0 };
                case "leftbottom": return { x: 0, y: -h };
                case "righttop": return { x: -w, y: 0 };
                case "rightbottom": return { x: -w, y: -h };
                case "center": return { x : -w / 2, y: -h / 2 };
            }
        },
        drawSelf: function (ctx, ratio) {
            var dObj = this.getPropertyUse(["opacity", "x", "y", "shadow", "linedash", "width", "height", "fill", "stroke", "linedashoffset", "linewidth", "miterlimit", "linejoin", "linecap"]);
            ctx.translate(dObj.x * ratio, dObj.y * ratio);
            var property = this.property;
            if (typeof dObj.opacity !== "undefined") ctx.globalAlpha = parseFloat(dObj.opacity);
            this.transformView(ctx, ratio);
            var keyToCanvas = canvasTool.keyToCanvas;
            for (var key in property) {
                var ctxKey = keyToCanvas[key];
                if (ctxKey) {
                    if (ctxKey == "fillStyle" || ctxKey == "strokeStyle") ctx[ctxKey] = this.getFillOrStrokeStyle(dObj[key]);
                    else ctx[ctxKey] = dObj[key];
                }
            }
            if (dObj.linedash) this.useLineDash(ctx, dObj.linedash, dObj.linedashoffset, ratio);
            if (dObj.shadow) this.useShadow(ctx, dObj.shadow, ratio);
            var w =  dObj.width * ratio, h = dObj.height * ratio;
            var pObj = this.createPosition(this.position, w, h);
            if (dObj.fill) {
                ctx.fillRect(pObj.x, pObj.y, w, h);
            }
            if (dObj.stroke) {
                ctx.strokeRect(pObj.x, pObj.y, w, h);
            }
        },
        get position() {
            return this.getValue("position");
        },
        set position(value) {
            this.setValue("position", value);
        },
        get shadow() {
            return this.getValue("shadow");
        },
        set shadow(value) {
            this.setValue("shadow", value);
        },
        get width() {
            return this.getValue("width");
        },
        set width(value) {
            this.setValue("width", value);
        },
        get height() {
            return this.getValue("height");
        },
        set height(value) {
            this.setValue("height", value);
        },
        get x() {
            return this.getValue("x");
        },
        set x(value) {
            this.setValue("x", value);
        },
        get y() {
            return this.getValue("y");
        },
        set y(value) {
            this.setValue("y", value);
        },
        get fill() {
            return this.getValue("fill");
        },
        set fill(value) {
            this.setValue("fill", value);
        },
        get transform() {
            return this.getValue("transform");
        },
        set transform(value) {
            this.setValue("transform", value);
        },
        get stroke() {
            return this.getValue("stroke");
        },
        set stroke(value) {
            this.setValue("stroke", value);
        },
        set hidden(value) {
            this.setValue("hidden", value);
        },
        get hidden() {
            return this.getValue("hidden");
        },
        get animation() {
            return this.getValue("animation");
        },
        set animation(value) {
            if (this.setValue("animation", value)) {
                if (value) this.addPropertyAnimation(value, this);
            }
        },
        set transition(value) {
            this.setValue("transition", value);
        },
        get transition() {
            return this.getValue("transition");
        },
        set linedash(value) {
            this.setValue("linedash", value);
        },
        get linedash() {
            return this.getValue("linedash");
        },
        set linedashoffset(value) {
            this.setValue("linedashoffset", value);
        },
        get linedashoffset() {
            return this.getValue("linedashoffset");
        },
        set linecap(value) {
            this.setValue("linecap", value);
        },
        get linecap() {
            return this.getValue("linecap");
        },
        set linejoin(value) {
            this.setValue("linejoin", value);
        },
        get linejoin() {
            return this.getValue("linejoin");
        },
        set linewidth(value) {
            this.setValue("linewidth", value);
        },
        get linewidth() {
            return this.getValue("linewidth");
        },
        set miterlimit(value) {
            this.setValue("miterlimit", value);
        },
        get miterlimit() {
            return this.getValue("miterlimit");
        },
        set opacity(value) {
            this.setValue("opacity", value);
        },
        get opacity() {
            return this.getValue("opacity");
        }
    })
})